<html>
<head>
  <title>OpenZone</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <style>
    body {
      font-family: sans-serif;
    }
    div.module {
      text-align: center;
    }
    table {
      width: 100%;
    }
    table td {
      padding: 10px;
    }
    table td.side {
      width: 10%;
      background-color: #ffffff;
    }
    table#hudArea {
      position: absolute;
      top: 100px;
      width: 100%;
    }
    table#hudArea td#hudText {
      width: 600px;
      text-align: center;
      font-weight: bold;
      font-size: 1.5em;
      color: #808080;
    }
  </style>
  <script type="text/javascript">
    var module    = null;
    var hudArea   = null;
    var hudText   = null;
    var hasLoaded = false;
    var hasEnded  = false;

    window.onload   = onLoad;
    window.onresize = onResize;

    function handleMessage( e )
    {
      var type = e.data.substring( 0, 5 );
      var text = e.data.substring( 5 );

      if( type == "quit:" ) {
        hasEnded = true;

        window.onbeforeunload = null;
        module.style.visibility = "hidden";

        hudArea.style.display = "inline";
        hudText.innerHTML = "Finished<br/>You can now safely close this page.";
      }
      else if( type == "none:" ) {
        hudArea.style.display = "none";
        hudText.innerHTML = "";
      }
      else if( type == "init:" ) {
        window.onbeforeunload = onBeforeUnload;

        hudArea.style.display = "inline";
        hudText.innerHTML = "Initialising ...<br/>" +
                            "<span style='font-size: 0.6em; font-weight: normal'>" +
                            "If it takes long enough that you can read this, you don't have " +
                            "good enough graphics card or you have to navigate to " +
                            "<tt>chrome://flags</tt> and turn on " +
                            "<b>Override software rendering list</b>.</span>";
      }
      else if( type == "upd0:" ) {
        hudArea.style.display = "inline";
        hudText.innerHTML = "Checking for updates ...";
      }
      else if( type == "upd1:" ) {
        hudArea.style.display = "inline";
        hudText.innerHTML = "Downloading updates<br/>" + text;
      }
      else if( type == "data:" ) {
        hudArea.style.display = "inline";
        hudText.innerHTML = "Reading game data archives<br/>" + text;
      }
      else if( type == "lang:" ) {
        module.postMessage( "lang:" + navigator.language );
      }
      else if( type == "navi:" ) {
        window.open( text, "_blank" );
      }
    }

    function updateLoadProgress()
    {
      hasLoaded = true;

      if( event.lengthComputable && event.total > 0 ) {
        var percent = Math.round( event.loaded / event.total * 100.0 );

        hudText.innerHTML = "Loading<br/>" + percent + " %";
      }
      else {
        hudText.innerHTML = "Loading";
      }
    }

    function onLoadEnd( e )
    {
      hasLoaded = true;

      hudText.innerHTML = "Starting NaCl<br/>" +
                          "<span style='font-size: 0.6em; font-weight: normal'>" +
                          "If it takes long enough that you can read this some unexpected error " +
                          "occurred.</span>";
    }

    function onResize()
    {
      if( hasLoaded && hasEnded ) {
        module.style.visibility = "hidden";
      }
    }

    function onLoad()
    {
      module  = document.getElementById( "nacl" );
      hudArea = document.getElementById( "hudArea" );
      hudText = document.getElementById( "hudText" );

      module.addEventListener( "message", handleMessage, true );
      module.addEventListener( "progress", updateLoadProgress, true );
      module.addEventListener( "loadend", onLoadEnd, true );
    }

    function onBeforeUnload()
    {
      module.postMessage( "quit:" );

      return "When this messages has been displayed for a few seconds the game is probably saved " +
             "already and you can safely leave this page.";
    }
  </script>
</head>
<body>
  <table id="hudArea">
    <tr>
      <td/>
      <td id="hudText">
        Loading<br/><span style="font-size: 0.6em; font-weight: normal">
        Google Chrome/Chromium 20 or newer is required.
        If module doesn't load in a reasonable time you probably haven't enabled Native Client.
        Navigate to <tt>chrome://flags</tt>, turn on <b>Native Client</b> and restart your browser.
      </td>
      <td/>
    </tr>
  </table>
  <div class="module">
    <embed id="nacl" width="1280" height="720" src="openzone.nmf" type="application/x-nacl"/>
  </div>
  <div>
    <p>When it loads a mouse click on the game is required for focus. Use F11 to toggle fullscreen
    mode.</p>
    <h4>Basic controls</h4>
    <p>Movement: W, A, S, D<br/>
    Jump: Space<br/>
    User Interface: Tab<br/>
    Main menu: F10<br/>
    <p><a href="doc/README.html">More</a></p>
    <p>Because of technical limitations of Native Client performance may be significantly worse than
    with native Linux and Windows versions.</p>
  </div>
  <div><small>
    <p>OpenZone (engine) © 2002-2013 Davorin Učakar.<br/>
    <a href="http://ducakar.github.com/openzone/">http://ducakar.github.com/openzone/</a></p>
    <p>Engine is licensed under <a href="doc/licences/COPYING.GPL3.txt">GNU GPL 3.0</a>.
    Data files and libraries distributed with OpenZone are work of various authors and use separate
    licences. See <a href="doc/README.html#legal">details</a>.</p>
  </small></div>
</body>
</html>
